<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DreamPHP v1.0后台管理</title>
    <link rel="shortcut icon" href="layui/favicon.jpg">
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="layui/css/s-admin.css">
</head>
<body>
    <div class="layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">
                <a href="index.html">DreamPHP v1.0</a>
            </div>
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item">
                    <a href="">前台首页</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" id="pay">捐赠我</a>
                </li>
            </ul>
            <ul class="layui-nav layui-layout-right header-nav">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img src="layui/favicon.jpg" class="layui-nav-img" alt="">DreamPHP
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="">基本资料</a></dd>
                        <dd><a href="">密码修改</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="" id="loginout"><i class="layui-icon">&#x1007;</i>&nbsp;退出</a>
                </li>
            </ul>
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree" lay-filter="nav">
                    <li class="layui-nav-item">
                        <a href="javascript:;"><i class="layui-icon">&#xe63c;</i>栏目管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" thref="catelist.html">栏目列表</a></dd>
                            <dd><a href="javascript:;" thref="cateadd.html">栏目添加</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <div class="layui-tab layui-tab-card" lay-filter="tab" lay-allowClose="true">
                <div id="close">操作&nbsp;<i class="layui-icon">&#xe623;</i></div>
                <ul id="closenav" style="position:fixed;display: none;right: 20px;top: 100px;width: 150px;text-align: center;background:#ffffff;border: 1px solid #f2f2f2;">
                    <li style="margin-top: 10px"><a href="javascript:;" id="now">刷新当前选项卡</a></li>
                    <hr>
                    <li style="margin-top: 10px"><a href="">关闭当前选项卡</a></li>
                    <hr>
                    <li style="margin-top: 10px"><a href="">关闭其它选项卡</a></li>
                    <hr>
                    <li style="margin-top: 10px"><a href="">关闭所有选项卡</a></li>
                </ul>
                <ul class="layui-tab-title" style="margin-right: 95px!important;">
                    <li class="layui-this">我的桌面</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <iframe src="welcome.html" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-footer">
            <p>Copyright © 2018 DreamPHP All rights</p>
        </div>
    </div>

    <script src="layui/layui.js"></script>
    <script>
        layui.use(['element', 'layer'], function () {
            var $ = layui.jquery,
                element = layui.element,
                layer = layui.layer;

            $('#pay').on('click', function () {
                layer.open({
                    title:false,
                    type:1,
                    content:'<img src="layui/wx.png" />',
                    shadeClose:true,
                    area:['297px', '298px'],
                    closeBtn:0
                });
            });

            $(window).resize(function () {
                $('.layui-tab').height($('.layui-body').height()-44);
            });
            $('.layui-tab').height($('.layui-body').height()-44);

            element.on('nav(nav)', function (elem) {
                var title = elem.find('a').text(),
                    url = elem.find('a').attr('thref');
                for (var i = 0;i < $('iframe').length;i++) {
                    if ($('iframe').eq(i).attr('src') == url) {
                        element.tabChange('tab', title);
                        return;
                    }
                }
                if ($('iframe').length >= 10) {
                    layer.msg('<span style="font-weight: bold;">请关闭不用的选项卡</span>', {
                        icon:5,
                        shadeClose:true,
                        title:'选项卡最多10个',
                        skin:'layui-layer-molv',
                        anim:6,
                        closeBtn:1
                    });
                    return;
                }
                element.tabAdd('tab', {
                    title:title,
                    content:'<iframe src="'+url+'" frameborder="0"></iframe>',
                    id:title
                });
                element.tabChange('tab', title);
            });

            $('#close,#closenav').mouseover(function () {
                $('#closenav').css('display', 'block');
            });
            $('#close,#closenav').mouseleave(function () {
                $('#closenav').css('display', 'none');
            });
        });
    </script>
</body>
</html>